<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="netwPlanningTemplate.xhtml">
<ui:define name="contentNetwPlanning">
    <h1>Physical View</h1>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">

           //<![CDATA[

  var infowindow;
  var map;

 function initialize() {
    geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(50.47, 30.50);
    var myOptions = {
      zoom: 11,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("data.xml", function(data) {

      var markers = data.documentElement.getElementsByTagName("marker");


      for (var i = 0; i < markers.length; i++) {
         var id = markers[i].getAttribute("id");
         var address=markers[i].getAttribute("address");
		 var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));

          codeAddress(address, id, latlng);

       }
     });


  function codeAddress(address, id, latlng) {


        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

      google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: "id: " + id +"<br>"+ "address: " + address});
      infowindow.open(map, marker);
    });




  }

}

   //]]>

</script>

    <h:form>
        <h:commandButton value="Update Map" action="#{updateGoogleMap.update}"/>
    </h:form>  <br/>
    
    <div id="map_canvas" style="width:100%; height:80%"></div>
</ui:define>
</ui:composition>